<template>
  <TnPopup v-model="show" open-direction="bottom" height="750rpx">
    <view class="tn-p-lg" style="padding-bottom: 10 !important;">
      <view class="login-header">
        <view class="login-header__title">
          获取您的昵称、头像
        </view>
        <view class="login-header__close" @click="closeLoginAuth">
          <TnIcon name="close" />
        </view>

      </view>
      <view class="login-header-tips">
        获取用户头像、昵称，主要用于向用户提供具有辨识度的用户体验
      </view>
      <view class="user-avatar-box">
        <button open-type="chooseAvatar" @chooseavatar="onChooseAvatar"
          style="padding: 40rpx;background: transparent;border: none;border-radius: 999rpx;">
          <view class="user-avatar-box-img-box">
            <view v-if="!loginForm.avatar" class="user-avatar-box-img-box-empty">
              <TnIcon name="clover-fill" color="#e0e6e9" />
            </view>
            <view v-if="loginForm.avatar" class="user-avatar-box-img-box-avatar">
              <image :src="config.baseUrl + '/file/' + loginForm.avatar" />
            </view>
            <view class="user-avatar-box-img-box-assist">
              <TnIcon name="camera-fill" />
            </view>
          </view>
        </button>
      </view>
      <view class="user-nickname">
        <input v-model="loginForm.nickname" type="nickname" @change="bindBlurNickName"
          style="height: 80rpx;background: none;display: flex;align-items: center" placeholder="请输入昵称" />
      </view>
      <view class="login-button">
        <TnButton :bg-color="loginForm.nickname && loginForm.avatar ? '#0045cf' : '#e2e2e2'"
          :text-color="loginForm.nickname && loginForm.avatar ? '#fff' : '#939393'" width="100%" height="74rpx"
          :disabled="!loginForm.nickname && !loginForm.avatar" @click="login">登录
        </TnButton>
      </view>
    </view>
  </TnPopup>
</template>
<script setup>
import TnPopup from '@tuniao/tnui-vue3-uniapp/components/popup/src/popup.vue'
import TnIcon from '@tuniao/tnui-vue3-uniapp/components/icon/src/icon.vue'
import TnInput from '@tuniao/tnui-vue3-uniapp/components/input/src/input.vue'
import TnButton from '@tuniao/tnui-vue3-uniapp/components/button/src/button.vue'
import { ref, toRefs } from 'vue'
import { config } from "@/config";
import { post } from '@/request/request'

const props = defineProps({
  // 弹框显示状态
  show: {
    type: Boolean,
    default: false,
  },
})
const { show, pages } = toRefs(props)
const emit = defineEmits(['update:show', 'login-success'])


const loginForm = ref({
  jsCode: '',
  nickname: '',
  avatar: '',
  distCode: ''
})

loginForm.value.distCode = uni.getStorageSync("disCode")

const bindBlurNickName = (e) => {
  loginForm.value.nickname = e.detail.value;
  console.log(e.detail.value)
}
const onChooseAvatar = (e) => {
  // 换成自己的上传接口
  uni.uploadFile({
    url: config.baseUrl + '/public_api/upload_avatar',
    fileType: 'image',
    name: 'avatar',
    header: { "Content-Type": "multipart/form-data" },
    filePath: e.detail.avatarUrl,
    success: (res) => {
      const result = JSON.parse(res.data)
      loginForm.value.avatar = result.data.avatar;
    },
  })
}

const closeLoginAuth = () => {
  // 关闭弹框
  emit('update:show', false)
}

const login = () => {
  uni.login({
    provider: 'weixin',
    success: function (loginRes) {
      console.log(loginRes.code);
      loginForm.value.jsCode = loginRes.code;
      // 登录成功
      console.log(loginForm.value);
      post('/user_login', loginForm.value, { "Content-Type": "application/x-www-form-urlencoded" }).then(res => {
        console.log('登录：', res);
        if (res.code === 200) {
          uni.setStorageSync('sessionKey', res.data.sessionKey);
          uni.showToast({
            title: res.message,
            icon: 'success',
            success: () => {
              emit('update:show', false)
              setTimeout(() => {
                emit('login-success')
              }, 500)
            }
          })
        }
      })
    },
    fail: function (err) {
      console.log('登陆：', err);
      // 登录授权失败
    }
  })
}
</script>
<style scoped lang="scss">
.login-header {
  display: flex;
  align-items: center;
  justify-content: space-between;

  &__title {
    font-size: 1.125rem;
  }

  &__close {
    font-size: 36rpx;
    cursor: pointer;

  }

  &-tips {
    padding: 10rpx;
    font-size: .8125rem;
    color: #a0a0a0;
  }
}

.user-avatar-box {
  position: relative;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: .875rem;

  &-img-box,
  &-img-box-avatar {
    position: relative;
    width: 5.625rem;
    height: 5.625rem;
    border-radius: 50%;
  }

  &-img-box:before {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 110%;
    height: 110%;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, .4);
    filter: drop-shadow(0 0 2.5rem rgba(0, 0, 0, 0.15));
    // box-shadow: 0 0 2.5rem rgba(0, 0, 0, .15);
  }

  &-img-box-empty {
    position: relative;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background-color: #f7f6f7;
    color: #e0e6e9;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 3.125rem;
  }

  &-img-box-assist {
    position: absolute;
    right: -.3125rem;
    bottom: -.375rem;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    background-color: #080808;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    border: .1875rem solid #fff;
  }
}

.user-nickname {
  position: relative;
  width: 100%;
  height: 2.5rem;
  background-color: #f7f6f7;
  margin-top: 1.5625rem;
  padding: 0 .625rem;
  border-radius: .375rem;
  font-size: .875rem;
}

.login-button {
  position: relative;
  width: 100%;
  margin-top: .1875rem;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: .8125rem 0;
  border-radius: .375rem;
}
</style>